import React from 'react'

//导入axios
import axios from 'axios';

//1、导入navbar组件
import { NavBar, Toast } from 'antd-mobile';

//导入list组件
import { List, AutoSizer } from 'react-virtualized'

//导入样式
import './index.scss'

//格式化数据方法
const formatCityData=(list)=>{
  const cityList= {}
  // const cityIndex= []
  //1.遍历list数组
  list.forEach(item=> {
    //2.获取每一个城市的首字母
    const first=item.short.substr(0,1)
    //3.判断cityList中是否有该分类
    if(cityList[first]) {
      //4.如果有，直接push
      cityList[first].push(item)
    }else {
      //5.如果没有，先创建数组，然后把当前城市信息添加到数组中
      cityList[first] = [item]
    }
  })

  //获取索引数据
  const cityIndex=Object.keys(cityList).sort()



  return {
    cityList,
    cityIndex
  }
}

// 列表数据源
// const list = Array(100).fill('react-virtualized')

//渲染每一行数据的渲染函数
//函数的返回值表示最终渲染在页面中的内容
// function rowRenderer({
//   key, // Unique key within array of rows
//   index, // Index of row within collection
//   isScrolling, // The List is currently being scrolled
//   isVisible, // This row is visible within the List (eg it is not an overscanned row)
//   style, // Style object to be applied to row (to position it)
// }) {
//   return (
//     <div key={key} style={style}>
//       {list[index]}
//     </div>
//   );
// }

//封装处理字母索引的方法
const formatCityIndex = (letter) => {
  switch (letter) {
    case 'hot':
      return '热门城市'
    default:
      return letter.toUpperCase()
      break;
  }
}

const title_height=36
const name_height=50
//有房源的城市
const house_city=['北京','上海','广州','深圳']

export default class CityList extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      cityList:{},
      cityIndex: [],
      //指定右侧字母索引列表高亮索引号
      activeIndex: 0
    }

    //创建ref对象
    this.cityListComponent=React.createRef()
  }



  async componentDidMount() {
    //让他获取到数据之后才会执行下面的函数
    await this.getCityList()

    //调用measureAllRows，提前计算list中每一行的高度，实现精确跳转
    //注意：调用方法的时候需要保证list组件中已经有数据了
    this.cityListComponent.current.measureAllRows()
  }

  //获取城市列表数据的方法
  async getCityList() {
    const res= await axios.get('http://localhost:8080/area/city?level=1')
    // console.log(res);
    const { cityList, cityIndex } = formatCityData(res.data.body)

    //获取热门城市数据
    //1.获取热门城市数据
    const hotRes= await axios.get('http://localhost:8080/area/hot')
    // console.log(hotRes);
    cityList['hot']=hotRes.data.body
    cityIndex.unshift('hot')

    this.setState({
      cityList,
      cityIndex
    })
  }

  changeCity({label,value}) {
    if(house_city.indexOf(label)>-1){
      //有
      localStorage.setItem('hkzf_city',JSON.stringify({label,value}))
      this.props.history.go(-1)
    }else{
      Toast.info('该城市暂无房源数据',1,null,false)
    }
  }

  //list组件渲染每一行的方法
  rowRenderer=({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {
    //获取每一行的字母索引
    const { cityIndex,cityList } = this.state
    const letter = cityIndex[index]

    //获取指定字母索引下的城市列表数据
    // cityList[letter]

    return (
      <div key={key} style={style} className="city">
        <div className="title">{formatCityIndex(letter)}</div>
        {
          cityList[letter].map(item => <div className="name" key={item.value} onClick={()=>this.changeCity(item)}>{item.label}</div>)
        }
      </div>
    );
  }

  //动态计算每一行高度的方法
  getRowHeight = ({index}) => {
    //索引标题高度+城市数量*城市名称的高度
    //title_height + cityList[cityIndex[index]].length*name_height

    const { cityList,cityIndex }=this.state
    return title_height + cityList[cityIndex[index]].length * name_height
  }

  // 封装渲染右侧索引列表的方法
  renderCityIndex() {
    // 获取到 cityIndex，并遍历其，实现渲染
    const { cityIndex, activeIndex } = this.state
    return cityIndex.map((item, index) => (
      <li className="city-index-item" key={item} onClick={()=>{
        this.cityListComponent.current.scrollToRow(index)
      }}>
        <span className={activeIndex === index ? 'index-active' : ''}>
          {item === 'hot' ? '热' : item.toUpperCase()}
        </span>
      </li>
    ))
  }

  //用于获取list组件中渲染行的信息
  onRowsRendered = ({ startIndex }) => {
    if (this.state.activeIndex!== startIndex) {
      this.setState({
        activeIndex:startIndex
      })
    }
  }

  render() {
    return <div className="citylist">
      {/* 顶部导航栏 */}
      <NavBar
        className="navbar"
        mode="light"
        icon={<i className="iconfont icon-back"></i>}
        onLeftClick={() => this.props.history.go(-1)}
      >
        城市选择
      </NavBar>

      {/* 城市列表 */}
      <AutoSizer>
          {({ width, height }) => (
            <List
              ref={this.cityListComponent}
              width={width}
              height={height}
              rowCount={this.state.cityIndex.length}
              rowHeight={this.getRowHeight}
              rowRenderer={this.rowRenderer}
              onRowsRendered={this.onRowsRendered}
              scrollToAlignment="start"
            />
          )}
        </AutoSizer>

      {/* 右侧索引列表 */}
      {/* 
        1 封装 renderCityIndex 方法，用来渲染城市索引列表。
        2 在方法中，获取到索引数组 cityIndex ，遍历 cityIndex ，渲染索引列表。
        3 将索引 hot 替换为 热。
        4 在 state 中添加状态 activeIndex ，指定当前高亮的索引。
        5 在遍历 cityIndex 时，添加当前字母索引是否高亮的判断条件。
      */}
      <ul className="city-index">{this.renderCityIndex()}</ul>
    </div>
  }
}
